import React, {Component, Fragment} from 'react';
import {observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools, Icon, WhiteSpace } from 'weaver-mobile';
import classnames from 'classnames';

const getLabel = Tools.getLabel;

@withRouter
@observer
export default class SignBtn extends Component {
    constructor(props){
        super(props);
        this.state = {
            currTime: null,
            showBtn: false
        }
    }

    componentWillMount(){
        this.monitor();
        const {data} = this.props;
        if(data.needSign === '1'){
            this.setState({
                showBtn: true
            });
        }
    }

    componentWillUnmount(){
        this.timer != null && clearInterval(this.timer);
    }

    monitor = () => {
        this.timer != null && clearInterval(this.timer);
        this.timer = setInterval(() => {
            const {store: {currTime}} = this.props;
            this.setState({currTime});
        }, 1000);
    }

    onSignClickHandle = () => {
        const {store, data} = this.props;
        const {outSignValid, callSign, redirectToOutsideSignApp} = store;
        if(outSignValid){
            redirectToOutsideSignApp();
        }else{
            callSign(data);
        }
    }

    redirectToMapSignPage = () => this.props.history.push({pathname: '/mapSignV2'});

    render(){
        const {showBtn, currTime} = this.state;
        const {store, data} = this.props;
        const {isYellow} = data;
        const {currTime: c, outSignValid, checkRangeResult, hasRangeCheck, showLocationRangeView} = store;
        const {message, iconProps} = checkRangeResult;

        const signBtnClassName = classnames({
            btn: true,
            ['btn-abnormal']: isYellow === '1',
            ['btn-outside']: outSignValid
        });

        let btnLbl = getLabel('500502','打卡');
        if(outSignValid)
            btnLbl = getLabel('500503','外勤打卡');

        return (
            <div className='signBtn'>
                {
                    showBtn && 
                    <Fragment>
                        <WhiteSpace size='lg'/>
                        <div className={signBtnClassName} onClick={this.onSignClickHandle}>
                            <div className='lbl'>{btnLbl}</div>
                            <div className='time'>{(currTime || c).format("HH:mm:ss")}</div>
                        </div>
                        <WhiteSpace size='lg'/>
                        {
                            hasRangeCheck &&
                            <div className='msg'> 
                                <div className='info'>
                                    <span><Icon className='icon' {...iconProps} /></span>
                                    <span>{message}</span>
                                </div>
                                <div className='checkRange' onClick={() => showLocationRangeView(data, this.redirectToMapSignPage)}>{getLabel('504546','查看考勤范围')}</div>
                            </div>
                        }
                    </Fragment>
                }
            </div>
        )
    }
}